<template>
    <div class="page">
        <h1 class="title"></h1>
        <div class="form">
            <div class="inform">
                <div class="form__row"
                    :class="{'form__row--error':name.error}">
                    <label>请输入您的姓名</label>
                    <input type="text" v-model="name.value" @focus="inputFocus" />
                </div>
                <div class="form__row"
                    :class="{'form__row--error':company.error}">
                    <label>请输入您的单位名称</label>
                    <input type="text" v-model="company.value" @focus="inputFocus" />
                </div>
                <div style="display:none;" class="form__row"
                    :class="{'form__row--error':job.error}">
                    <label>请输入您的职务</label>
                    <input type="text" v-model="job.value" @focus="inputFocus" />
                </div>
                <div style="display:none;" class="form__row"
                    :class="{'form__row--error':phone.error}">
                    <label>请输入您的手机号码</label>
                    <input type="tel" v-model="phone.value" @focus="inputFocus" />
                </div>
                <div class="form__line">
                    <sub></sub>
                    <sub></sub>
                    <sub></sub>
                </div>
                <button class="form__submit" @click="submitClick">提交信息</button>
            </div>
        </div>
        <div class="bg"></div>
    </div>
</template>

<script>

import toast from './toast/index.js'
import axios from 'axios'
import DB from '../assets/db.js'

export default {
    name: 'page',
    props: ['animate', 'next'],
    data () {
        return {
            done: false,
            name: {
                value: '',
                error: false,   
            },
            company: {
                value: '',
                error: false,
            },
            job: {
                value: '',
                error: false,
            },
            phone: {
                value: '',
                error: false,   
            },
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        },
        'phone.value'(v) {
            if (v.length > 11) {
                v = v.split('').splice(0,11).join('');
                this.phone.value = v;
            }
        }
    },
    methods: {
        pageInit() {
            this.done = true;
        },
        // 当input获取焦点时，所有错误提示消失
        inputFocus() {
            ['name', 'company', 'job', 'phone'].forEach(res => {
                this[res].error = false;
            })
        },
        submitClick() {
            // 去头尾空格
            this.name.value = this.name.value.trim();
            this.company.value = this.company.value.trim();
            this.job.value = this.job.value.trim();
            this.phone.value = this.phone.value.trim();

            // 判断验证
            if (!this.name.value) {
                toast.show('请输入您的姓名');
                this.name.error = true;
            }
            else if (!this.company.value) {
                toast.show('请输入您的单位名称');
                this.company.error = true;
            }
            // else if (!this.job.value) {
            //     toast.show('请输入您的职务');
            //     this.job.error = true;
            // }
            // else if (!this.phone.value) {
            //     toast.show('请输入您的手机号码');
            //     this.phone.error = true;
            // }
            // else if(!(/^1[34578]\d{9}$/).test(this.phone.value)){
            //     toast.show('请输入正确的手机号码');
            //     this.phone.error = true;
            // }
            else {
                let th = this;
                // ajax
                axios.request({
                    method: 'post',
                    url: `${DB.url}h5/v40/nanjing/application`,
                    headers: {
                        "Accept": "application/json;version=3.0;compress=false",
                        "Content-Type": "application/json;charset=utf-8",
                    },
                    data: {
                        name: th.name.value,
                        unit: th.company.value,
                        // duty: th.job.value,
                        // mobile: th.phone.value,
                        requestId: new Date().getTime(),
                    }
                }).then(res => {
                    res = res.data;
                    if (res.resCode === '000000') {
                        // ajax done
                        th.next();
                        setTimeout(() => {
                            toast.show('报名成功', 'success');
                        }, 300);
                        // 清空输入的值
                        ['name', 'company', 'job', 'phone'].forEach(res => {
                            th[res].value = '';
                        })
                    } else {
                        toast.show(res.resMsg);
                    }
                }).catch(res => {
                    toast.show('系统错误，请稍后再试');
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p5.jpg");
        background-position: center center;
        background-size: cover;
    }
    .title {
        width: 4rem;
        height: 0.8rem;
        z-index: 2;
        background: url("../assets/images/title_p5.png");
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 0.8rem;
        transform: translate(-50%,0);
    }
    .form {
        padding: 0 0.7rem;
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 2;
        transform: translate(0,-50%);
        margin-top: 0.7rem;
        &__row {
            margin-bottom: 0.15rem;
            label {
                font-size: 0.3rem;
                color: #fff;
                line-height: 2;
                display: block;
                // @at-root .ip4 & {
                //     line-height: 1.4;
                // }
            }
            input {
                background: #fff;
                display: block;
                width: 100%;
                font-size: 0.3rem;
                padding: 0.24rem 0.2rem;
                border-radius: 0.1rem;
                transition: box-shadow 0.2s ease-out;
                &:focus {
                    box-shadow: 0 0 0.5rem rgba(255,255,255,0.8);
                }
                // @at-root .ip4 & {
                //     padding: 0.2rem;
                // }
            }
            &--error {
                label {
                    color: #ff4200;
                    font-weight: bold;
                }
            }
        }
        &__line {
            width: 100%;
            height: 0.6rem;
            position: relative;
            margin-bottom: 0.1rem;
            overflow: hidden;
            // @at-root .ip4 & {
            //     display: none;
            // }
            &:before, &:after {
                content: "";
                display: block;
                width: 50%;
                height: 1px;
                background: #fff;
                position: absolute;
                left: 50%;
                top: 50%;
            }
            &:before {
                left: auto;
                right: 50%;
                margin-right: 0.6rem;
            }
            &:after {
                margin-left: 0.6rem;
            }
            sub {
                width: 0.29rem;
                height: 0.29rem;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background: url("../assets/images/icon_rect.png");
                background-size: 100% 100%;
                &:nth-child(1) {
                    margin-left: -0.29rem;
                }
                &:nth-child(3) {
                    margin-left: 0.29rem;
                }
            }
        }
        &__submit {
            display: block;
            width: 100%;
            height: 0.88rem;
            background: #41a3ff;
            border-radius: 0.1rem;
            font-size: 0.3rem;
            color: #fff;
            &:active {
                background: #41a3ff - 20;
            }
            // @at-root .ip4 & {
            //     margin-top: 0.4rem;
            // }
        }
    }
    .inform {
        background: rgba(0, 0, 0, 0.4);
        padding: 0.4rem;
        border-radius: 0.15rem;
    }
}
</style>
